<template>
  <div class="main_bg">

    <!-- 医生头部信息 -->
    <section>
      <div>
        <div>
          <!-- <img src="../../static/images/dochead.jpg"/> -->
          <!-- <img :src="root + DOCTORIMAGEPATH | showHeadPic"/> -->
          <img :src="DOCTORIMAGEPATH | showHeadPic"/>
        </div>
        <div>
          <p><b>{{DOCTORNAME}}</b>{{DOCTORDEPARTMENT}}</p>
          <p>{{HOSPITALNAME}}</p>
        </div>
      </div>
      <div>
        <!-- <span>{{咨询}}</span><span>{{回头率}}</span><span>{{收藏}}</span> -->
      </div>
    </section>

    <!-- 医生简介  -->
    <section>
      <div>
        <div>
          <span>为谁留言</span>
          <span @click="openPatientList()">
            <span>{{showDoctorDetailButton}}</span>
            <svg class="icon" style="" fill="#666" viewBox="0 0 1024 1024"
              version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
              height="20"
            ><defs><style type="text/css"></style></defs><path d="M349.6 145.6 676 472c6.4 6.4 9.6 14.4 9.6 22.4 0 8-3.2 16.8-9.6 22.4l-326.4 326.4c-12 12-32.8 14.4-45.6 2.4-13.6-12-13.6-33.6-0.8-46.4L608 495.2c0 0 0 0 0-0.8L302.4 189.6c-12.8-12.8-12.8-33.6 0.8-46.4C316.8 131.2 336.8 133.6 349.6 145.6z"></path></svg>
          </span>
        </div>
        <div v-show="showPatientDetail">
          <div>
            <span>姓名</span><span>{{patArr[0].PATIENT_NAME}}</span>
          </div>
          <div>
            <span>年龄</span><span>{{patArr[0].PATIENT_AGE}}</span>
          </div>
          <div>
            <span>性别</span><span>{{patArr[0].PATIENT_SEX}}</span>
          </div>
          <div>
            <span>关系</span><span>{{'未知'}}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 留言 -->
    <section>
      <div>
        <h6>留言提示</h6>
        <span>1. 收到的您的留言后，医生会第一时间给您回复</span>
        <mt-button v-show="patNum > 0" type="primary" size="large"
          @click.native="startLeaveMessage()"
        >确定</mt-button>
        <mt-button disabled v-show="patNum <= 0" type="primary" size="large">请选择为谁留言</mt-button>
      </div>
    </section>

    <!-- 图方咨询 -->
    <!-- 在线聊天 -->
    <!-- 远程视频诊疗 -->
    <!-- 评价 -->
    <!-- 动态响应搜索列表 -->
  </div>
</template>

<script>
import { Toast } from 'mint-ui';

const { config } = window;


export default {
  data() {
    return {

      showDoctorDetailButton: '点击选择',
      showPatientDetail: false,

      docStatus: '在线',
      DOCTORDETAIL: '暂无内容',
      DOCTORIMAGEPATH: '',
      DOCTORNAME: '医生名称',
      DOCTORDEPARTMENT: '医生级别',
      DOCTORMAJOR: '科室',
      HOSPITALNAME: '医院名称',

      ts: this.newStore(),
      tq: this.getData(),
      root: `https://${sessionStorage.getItem('hospitalDomainname')}/doctor`,

      jsonParams: {},

      patNum: 0, // 该账户下就诊人数量
      patArr: [{}],

    };
  },
  created() {
    /* 创建页面参数 */
    document.title = '选择就诊人';

    /* 创建页面数据 */
    this.jsonParams = JSON.parse(this.$route.query.jsonParams);
    console.log(`传递过来的参数：${this.jsonParams}`);
    this.DOCTORNAME = `${this.jsonParams.DOCTORNAME}`;
    this.DOCTORDEPARTMENT = `${this.jsonParams.DOCTORDEPARTMENT}`;
    this.HOSPITALNAME = `${sessionStorage.getItem('hosName')}`;
    this.DOCTORIMAGEPATH = `${this.jsonParams.DOCTORIMAGEPATH}`;
  },
  mounted() {
    this.queryDefaultPatient();
  },
  components: {
  },
  methods: {
    openPatientList() {
      console.log('------打开就诊人列表，选择为谁留言-------');
      this.$router.push({
        name: 'wode-patientlist',
        query: { fromPath: -2 },
      });
    },
    startLeaveMessage() {
      console.log('------点击选择就诊人，开始留言-------');
      if (this.patNum <= 0) {
        Toast('请先选择就诊人');
        return;
      }
      /* 医生信息，患者信息 */
      this.$router.push({
        name: 'doctor-curePatient', query: { jsonParamsDoctor: `${this.$route.query.jsonParams}`, jsonParamsPatient: `${JSON.stringify(this.patArr[0])}` },
      });
    },
    /* 获取该患者账户的默认就诊人 */
    queryDefaultPatient() {
      console.log('------获取默认就诊人-------');
      const DATA2 = {};
      this.tq.getPatientDefaulty(DATA2, this).then((ts) => {
        this.patNum = Number(ts.d.DATAOBJ.TOTAL);
        console.log(`------当前账户下默认就诊人数量：${this.patNum}`);
        console.log(`------当前账户下默认就诊人信息：${JSON.stringify(ts.d)}`);
        if (this.patNum > 0) {
          this.patArr = ts.d.DATAOBJ.DATA;
          this.showPatientDetail = true;
        }
      });
    },
  },
  watch: {
  },
  filters: {
    /*
    showHeadPic(value) {
      if (!value || value == '' || value == 'null' || value == undefined) return '/pic/head/test.jpg';
      return `${value}`;
    }, */

    showHeadPic(value) {
      if (!value || value == '' || value == 'null' || value == undefined) return '../images/dochead.jpg';/* '../../static/images/dochead.jpg' */
      return `https://${sessionStorage.getItem('hospitalDomainname')}/doctor${value}`;
    },
  },
};
</script>

<style scoped lang="stylus">
.main_bg
  display flex
  flex-flow column || nowrap
  justify-content center
  /* border-bottom 1px solid #f1f1f1 */
  height 100%
  width 100%
  background-color #f1f1f1
  font-size .7rem
  h6
    font-size 1rem
    font-weight bold
  letter-spacing .05rem /* 字间距 */
  section
    display inline-flex /* 没有这个，后面所有的justify-content和align-content无法使用 */
    flex-flow row || nowrap
    width 100%
    background-color #fff
    margin-bottom 1.3rem
    justify-content flex-start
    border-bottom 0px solid #f1f1f1
    padding .5rem
    &:first-child   /* 医生信息 */
        /* background-color #26a2ff */
        /* background url("../../static/images/docdetailbg.png") no-repeat */
        background-origin padding-box
        background-size 100% auto   /* 图片背景自适应 */
        height 4rem
        div
            display inline-flex
            flex-flow column || wrap
            justify-content flex-start
            /* width 80% */
            &:first-child   /* 医生信息：头像、名称、收藏。。 */
                display inline-flex
                flex-flow row || wrap
                /* align-items center */
                justify-content flex-start
                height 100%
                div
                    &:first-child   /* 头像 */
                        flex-flow column || wrap
                        justify-content center
                        /* background-color #000 */
                        margin-right .5rem
                        img
                            width 3rem
                            border-radius 15px
                            border 1px solid #fff
                    &:last-child    /* 名称等信息 */
                        flex-flow column || wrap
                        justify-content flex-start
                        align-items flex-start
                        width 16rem
                        font-size .7rem
                        p
                            color #666
                            margin-bottom 0rem
                            &:first-child /* 医生名称、级别 */
                                margin-bottom .2rem
                                b
                                    color #000
                                    font-size 1rem  /* 医生名称 */
                                    margin-right .5rem
                            &:last-child  /* 医院 */
                                margin-top .5rem
            &:last-child    /* 咨询、回复率、等 */
                text-align center
    &:nth-child(2)   /* 为谁留言 */
        display inline-flex
        flex-flow column || nowrap
        justify-content center
        div
            div
                &:first-child
                    display flex
                    flex-flow row || nowrap
                    justify-content space-between
                    align-items center
                    span    /* 为谁留言 */
                        font-weight bold
                        font-size 1rem
                        &:last-child    /* 点击选择 */
                            display inline-flex
                            flex-flow row || nowrap
                            justify-content flex-start
                            align-items center
                            font-weight normal
                            font-size 1rem
                            color #666
                            span
                                font-weight normal
                &:last-child    /* 选择的就诊人信息 */
                    display flex
                    flex-flow column || wrap
                    justify-content center
                    align-items center
                    margin 1rem auto
                    -webkit-box-shadow:0px 1px 3px #c8c8c8 ;
                    -moz-box-shadow:0px 1px 3px #c8c8c8 ;
                    box-shadow:0px 1px 3px #c8c8c8 ;
                    width 80%
                    border-radius 10px
                    padding 1rem
                    div /* 姓名、性别、等等 */
                        border-bottom .05rem dashed #666
                        width 90%
                        display flex
                        flex-flow row || nowrap
                        justify-content space-between
                        margin-bottom .5rem
                        span
                            font-size .8rem
                            font-weight normal
                            color #666
                            margin 0
                            &:last-child
                                font-size .8rem
                        &:last-child
                            margin 0
                            padding 0
                            border-radius 0px
                            -webkit-box-shadow:0px 0px 0px #c8c8c8 ;
                            -moz-box-shadow:0px 0px 0px #c8c8c8 ;
                            box-shadow:0px 0px 0px #c8c8c8 ;
    &:last-child   /* 留言提示 */
        -webkit-box-shadow:0px 1px 1px #c8c8c8 ;    /* 阴影 */
        -moz-box-shadow:0px 1px 1px #c8c8c8 ;
        box-shadow:0px 1px 1px #c8c8c8 ;
        display inline-flex
        flex-flow column || nowrap
        justify-content flex-start
        div
            display flex
            flex-flow column || nowrap
            justify-content flex-start !importment
            span
                color #666
                margin .5rem 0
.mint-button {  /* 大按扭的样式 */
  /* display: -webkit-inline-box; */
  width: 95%;
  margin: auto;
  font-size: 1rem;
  letter-spacing: 1px;
}
.mint-badge.is-primary {
  background-color: #fff;
}
.mint-badge {
  color: #26a2ff;
  width: 3rem;
}
.mint-badge.is-size-normal {
  font-size: 8px;!imporment
}
</style>

